<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:insert="/common/header::head">
    <meta charset="UTF-8">
    <title>Title</title>

    <link th:href="@{/assets/dist/css/bootstrap.min.css}" rel="stylesheet">


    <link rel="canonical" th:href="@{https://getbootstrap.com/docs/5.2/examples/headers/}">
    <link rel="canonical" th:href="@{https://getbootstrap.com/docs/5.2/examples/offcanvas-navbar/}">



    <link th:href="@{/css/index.css}" rel="stylesheet">
    <link th:href="@{/css/headers.css}" rel="stylesheet">
    <link th:href="@{/css/offcanvas.css}" rel="stylesheet">

<style>
    .cc{
        margin-top: 10px;
    }
</style>

</head>
<body>
<!--导航头部-->
<div th:insert="/common/header::top(2)"></div>


<!--文章简略-->
<div class="container mt-3 text-justify-center shadow-sm">
    <br>
    <a th:href="@{/back/article/add}" type="button" class="btn btn-primary">新增文章</a>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>文章标题</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="article:${articles}">
            <td th:text="${article.getTitle()}">1</td>
            <td th:text="${#dates.format(article.getDate())}">2</td>
<!--            <td th:text="${article.getCategory()}">3</td>-->
            <td>
                <button type="button" class="btn btn-info cc" data-bs-toggle="modal" data-bs-target="#myModal">详情</button>

                <!-- 模态框显示文章详情 -->
                <div class="modal fade" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title" th:text="${article.getTitle()}">模态框标题</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <!-- 模态框内容 -->
                            <div class="modal-body" th:text="${article.getContent()}">
                                模态框内容..
                            </div>

                            <!-- 模态框底部 -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                            </div>

                        </div>
                    </div>
                </div>

                <a th:href="@{'/back/article/edit/'+${article.getId()}}">
                    <button type="button" class="btn btn-primary">修改</button>
                </a>
                <a th:href="@{'/back/article/delete/'+${article.getId()}}"><button type="button" class="btn btn-danger">删除</button></a>
            </td>
        </tr>
        </tbody>
    </table>

</div>
<!--分页-->
<div class="container mt-3">
    <ul class="pagination justify-content-center" style="margin:20px 0">
        <!--上一页按钮-->
        <li class="page-item">
            <a class="page-link" th:href="@{'/page/user/'+${page==1?1:page-1}}">上一页</a>
        </li>
        <!--当前页面高亮-->
        <li th:each="i:${#numbers.sequence(1,totalPage)}" th:class="${page==i}?'page-item active':'page-item'">
            <a class="page-link" th:href="@{'/page/user/'+${i}}" th:text="${i}">页数</a>
        </li>
        <!--下一页按钮  判断是否最后一页-->
        <li class="page-item">
            <a class="page-link" th:href="@{'/page/user/'+${page==totalPage?totalPage:page+1}}">下一页</a>
        </li>
    </ul>
</div>




<div th:insert="/common/header::footer"></div>
<script>


</script>

</body>
</html>